<template>
	<div>
		<div class="collect_main" v-if="collectList">
			<div v-for="item in collectList" class="collect_box">
				<el-popover placement="top" width="160" v-model="item.visible" trigger="click">
					<p>确定删除吗？</p >
				    <div style="text-align: right; margin: 0">
				        <el-button type="primary" size="mini" @click="delCollect(item.product_id)">确定</el-button>
				   	</div>
					<span slot="reference" @click="item.visible = true" class="sp_del">×</span>
				</el-popover>
				
				<my-list :item="item"></my-list>
			</div>
		</div>
		<div class="collect_main" v-if="!collectList">
			<div>
				<img src="../../assets/imgs/cart-empty.png" alt="">
			</div>
		</div>
	</div>
</template>
<script>
	import collectApi from "@/api/collect.js"
	export default{
		data(){
			return{
				collectList:[]
			}
		},
		activated(){
			this.getCollect()
		},
		methods:{
			async getCollect(){
				let {data:res} = await collectApi.getCollect({"user_id":this.$store.state.user_id})
				console.log(res)
				this.collectList = res.collectList
				this.collectList.forEach(item=>{
					item.visible = false
				})
			},
			async delCollect(id){
				let {data:res} = await collectApi.deleteCollect({"user_id":this.$store.state.user_id,product_id: id})
				console.log(res)
				if(res.code == "001"){
					this.$notify({
					    message: res.msg,
					    type: 'success'
					});
					this.$router.go("/collect");
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.collect_main{
		width: 1225px;
		min-height: 400px;
		margin: 0 auto;
	}
	.collect_box{
		float: left;
		margin-left: 20px;
		background-color:white;
		margin-top: 20px;
	}
	.collect_box:hover{
		transform: translateY(-5px);
		box-shadow:0px 10px 10px #B0B0B0;
	}
	.sp_del{
		font-size: 20px;
		position: relative;
		left: 205px;
	}
</style>


